// 营销热点
import React, { useState, useRef } from 'react'
import './marke.css'
import Mnav from './mnav'

import MaTu from './maTu'

export default function Marketing() {

  const events = [
    {
      title: '中秋节', time: '2024-09-17', day: '5',
      imgSrc: 'https://js.ibaotu.com/act/24/07/18/6698890e795ed.jpg', label1: '中秋H5', label2: '共377个作品',
      imgSrc1: 'https://js.ibaotu.com/act/24/07/18/6698890e7f987.jpg', label3: '中秋H5', label4: '共377个作品',
      imgSrc2: 'https://js.ibaotu.com/act/24/07/18/669889070786a.jpg', label5: '中秋H5', label6: '共377个作品',
      imgSrc3: 'https://js.ibaotu.com/act/24/07/18/6698890e7b5b0.jpg', label7: '中秋H5', label8: '共377个作品',
      imgSrc4: 'https://js.ibaotu.com/act/24/07/18/6698890ecefdf.jpg', label9: '中秋H5', label10: '共377个作品',
    },

    {
      title: '九一八事变纪念日', time: '2024-09-18', day: '6',
      imgSrc: 'https://js.ibaotu.com/act/24/08/16/66bec618ac346.jpg', label1: '中秋H5', label2: '共377个作品',
      imgSrc1: 'https://js.ibaotu.com/act/24/08/16/66bec61e63d09.jpg', label3: '中秋H5', label4: '共377个作品',
      imgSrc2: 'https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg', label5: '中秋H5', label6: '共377个作品',
      imgSrc3: 'https://js.ibaotu.com/act/24/08/16/66bec626bbb39.jpg', label7: '中秋H5', label8: '共377个作品',
      imgSrc4: 'https://js.ibaotu.com/act/24/08/16/66bec629dfad8.jpg', label9: '中秋H5', label10: '共377个作品',
    },
    {
      title: '全国爱牙日', time: '2024-09-20', day: '8', imgSrc: 'https://js.ibaotu.com/act/24/07/18/6698891658300.jpg', label1: '中秋H5', label2: '共377个作品',
      imgSrc1: 'https://js.ibaotu.com/act/24/07/18/6698891663938.jpg', label3: '中秋H5', label4: '共377个作品',
      imgSrc2: 'https://js.ibaotu.com/act/24/07/18/669889070786a.jpg', label5: '中秋H5', label6: '共377个作品',
      imgSrc3: 'https://js.ibaotu.com/act/24/07/18/6698891b66959.jpg', label7: '中秋H5', label8: '共377个作品',
      imgSrc4: 'https://js.ibaotu.com/act/24/07/18/6698890ecefdf.jpg', label9: '中秋H5', label10: '共377个作品',
    },
    {
      title: '秋分', time: '2024-09-22', day: '10', imgSrc: 'https://js.ibaotu.com/act/24/07/18/6698891baa1f0.jpg', label1: '中秋H5', label2: '共377个作品',
      imgSrc1: 'https://js.ibaotu.com/act/24/07/18/6698891b732ea.jpg', label3: '中秋H5', label4: '共377个作品',
      imgSrc2: 'https://js.ibaotu.com/act/24/07/18/669889070786a.jpg', label5: '中秋H5', label6: '共377个作品',
      imgSrc3: 'https://js.ibaotu.com/act/24/07/18/6698890e7b5b0.jpg', label7: '中秋H5', label8: '共377个作品',
      imgSrc4: 'https://js.ibaotu.com/act/24/07/18/6698890ecefdf.jpg', label9: '中秋H5', label10: '共377个作品',
    },
    {
      title: '金秋九月', time: '2024-09-27', day: '15', imgSrc: 'https://js.ibaotu.com/act/24/08/28/66ced10d72585.jpg', label1: '中秋H5', label2: '共377个作品',
      imgSrc1: 'https://js.ibaotu.com/act/24/08/28/66ced0fa77d81.jpg', label3: '中秋H5', label4: '共377个作品',
      imgSrc2: 'https://js.ibaotu.com/act/24/07/18/669889070786a.jpg', label5: '中秋H5', label6: '共377个作品',
      imgSrc3: 'https://js.ibaotu.com/act/24/07/18/6698890e7b5b0.jpg', label7: '中秋H5', label8: '共377个作品',
      imgSrc4: 'https://js.ibaotu.com/act/24/07/18/6698891baa1f0.jpg', label9: '中秋H5', label10: '共377个作品',
    },
    {
      title: '国庆75周年', time: '2024-10-01', day: '19', imgSrc: 'https://js.ibaotu.com/act/24/08/06/66b1e3711b2fb.jpg', label1: '中秋H5', label2: '共377个作品',
      imgSrc1: 'https://js.ibaotu.com/act/24/08/06/66b1e37571229.jpg', label3: '中秋H5', label4: '共377个作品',
      imgSrc2: 'https://js.ibaotu.com/act/24/07/18/669889070786a.jpg', label5: '中秋H5', label6: '共377个作品',
      imgSrc3: 'https://js.ibaotu.com/act/24/07/18/6698890e7b5b0.jpg', label7: '中秋H5', label8: '共377个作品',
      imgSrc4: 'https://js.ibaotu.com/act/24/07/18/6698890ecefdf.jpg', label9: '中秋H5', label10: '共377个作品',
    },


    {
      title: '中秋节', time: '2024-09-17', day: '5',
      imgSrc: 'https://js.ibaotu.com/act/24/07/18/6698890e795ed.jpg', label1: '中秋H5', label2: '共377个作品',
      imgSrc1: 'https://js.ibaotu.com/act/24/07/18/6698890e7f987.jpg', label3: '中秋H5', label4: '共377个作品',
      imgSrc2: 'https://js.ibaotu.com/act/24/07/18/669889070786a.jpg', label5: '中秋H5', label6: '共377个作品',
      imgSrc3: 'https://js.ibaotu.com/act/24/07/18/6698890e7b5b0.jpg', label7: '中秋H5', label8: '共377个作品',
      imgSrc4: 'https://js.ibaotu.com/act/24/07/18/6698890ecefdf.jpg', label9: '中秋H5', label10: '共377个作品',
    },

    {
      title: '九一八事变纪念日', time: '2024-09-18', day: '6',
      imgSrc: 'https://js.ibaotu.com/act/24/08/16/66bec618ac346.jpg', label1: '中秋H5', label2: '共377个作品',
      imgSrc1: 'https://js.ibaotu.com/act/24/08/16/66bec61e63d09.jpg', label3: '中秋H5', label4: '共377个作品',
      imgSrc2: 'https://js.ibaotu.com/act/24/08/16/66bec6240ff21.jpg', label5: '中秋H5', label6: '共377个作品',
      imgSrc3: 'https://js.ibaotu.com/act/24/08/16/66bec626bbb39.jpg', label7: '中秋H5', label8: '共377个作品',
      imgSrc4: 'https://js.ibaotu.com/act/24/08/16/66bec629dfad8.jpg', label9: '中秋H5', label10: '共377个作品',
    },
    {
      title: '全国爱牙日', time: '2024-09-20', day: '8', imgSrc: 'https://js.ibaotu.com/act/24/07/18/6698891658300.jpg', label1: '中秋H5', label2: '共377个作品',
      imgSrc1: 'https://js.ibaotu.com/act/24/07/18/6698891663938.jpg', label3: '中秋H5', label4: '共377个作品',
      imgSrc2: 'https://js.ibaotu.com/act/24/07/18/669889070786a.jpg', label5: '中秋H5', label6: '共377个作品',
      imgSrc3: 'https://js.ibaotu.com/act/24/07/18/6698891b66959.jpg', label7: '中秋H5', label8: '共377个作品',
      imgSrc4: 'https://js.ibaotu.com/act/24/07/18/6698890ecefdf.jpg', label9: '中秋H5', label10: '共377个作品',
    },

  ];

  const [selectedIndex, setSelectedIndex] = useState(0); // 选中项的索引
  const ulRef = useRef<HTMLUListElement>(null);; // 对 `ul` 的引用，用于滚动
  const [arLfet, setArLfet] = useState(false)
  const [arRight, setArRight] = useState(true)
  const [left, setLeft] = useState(0);
  // const [right, setRight] = useState(0);
  const handleMouseEnter = (index: number) => {
    setSelectedIndex(index); // 鼠标滑过时更新选中的索引
  };

  const handleNavClick = (index: number) => {
    setSelectedIndex(index);
    console.log(`点击了导航项 ${index}`);
    if (index == 0) {
      window.location.href = '/autumn'
    }
  };
  // 右箭头
  const arrowRight = () => {
    // 左显示
    setArLfet(true);
    console.log(left, 'left')
    const ulWidth = ulRef.current ? ulRef.current.clientWidth : 0;
    console.log(ulWidth)
    setLeft(-250);
    setArRight(false)
  }
  // 左箭头
  const arrowLeft = () => {
    // 右隐藏
    setArRight(true);
    setArLfet(false);
    setLeft(0);

  }
  return (
    <div className='mark_box'>
      <div className='mark_top'>
        <h3>营销热点</h3>
        {/* 箭头 */}

        {
          arRight ? <button className='jian_right' onClick={() => arrowRight()}>&gt;</button> : null // 右隐藏
        }
        {
          arLfet ? <button className='jian_left' onClick={() => arrowLeft()}>&lt;</button> : null // 左隐藏
        }
        <div className='mark_nav'>


          <ul ref={ulRef} style={{ left: `${left}px`, transition: 'left 0.3s ease' }}>
            {events.map((event, index) => (
              <li key={index}
                className={selectedIndex === index ? 'highlight' : ''} // 根据选中项添加高亮样式
                onClick={() => handleNavClick(index)} // 点击项时更新选中项
                onMouseEnter={() => handleMouseEnter(index)} // 鼠标滑过时更新选中项
              >
                <Mnav title={event.title} time={event.time} day={event.day} />
              </li>
            ))}
          </ul>

        </div>

      </div>
      {/* 图片 */}
      <div className='mark_img'>
        <MaTu imgSrc1={events[selectedIndex].imgSrc} lable11={events[selectedIndex].label1} lable12={events[selectedIndex].label2}
          imgSrc2={events[selectedIndex].imgSrc1} lable21={events[selectedIndex].label3} lable22={events[selectedIndex].label4}
          imgSrc3={events[selectedIndex].imgSrc2} lable31={events[selectedIndex].label5} lable32={events[selectedIndex].label6}
          imgSrc4={events[selectedIndex].imgSrc3} lable41={events[selectedIndex].label7} lable42={events[selectedIndex].label8}
          imgSrc5={events[selectedIndex].imgSrc4} lable51={events[selectedIndex].label9} lable52={events[selectedIndex].label10}
        />

      </div>
    </div>
  )
}



